export default {
  name: 'Users',
  data () {
    return {
      users: [],
      info: {
        query: '',
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      addUserDialog: false,
      addUserInfo: {},
      addUserRules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'change' },
          { min: 3, message: '最少是3位字符', tirgger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' },
          { min: 6, message: '最少是6位字符', trigger: 'change' }
        ]
      },
      editUserDialog: false,
      editUserInfo: {
        email: '',
        mobile: '',
        id: 0
      },
      rightsDialog: false,
      rightsInfo: {
        username: '',
        id: 0,
        rights: ''
      },
      rightsList: []
    }
  },
  created () {
    this.getUsersList()
  },
  methods: {
    async getUsersList () {
      const { data } = await this.$get('users', { params: this.info })
      this.total = data.total
      this.users = data.users
    },
    sizeChangeHandler (val) {
      this.info.pagesize = val
    },
    currentChangeHandler (val) {
      this.info.pagenum = val
    },
    searchHandler () {
      this.info.pagenum = 1
    },
    closeAddUserDialogHandler () {
      this.$refs.addUser.resetFields()
      this.addUserInfo = {}
    },
    addUserHandler () {
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则填写表单'
          })
          return
        }
        const { meta } = await this.$post('/users', this.addUserInfo)

        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }

        this.$message({
          type: 'success',
          message: '添加用户成功'
        })

        this.addUserDialog = false
        this.getUsersList()
      })
    },
    async changeUserStateHandler (val) {
      const { meta } = await this.$http.put(`users/${val.id}/state/${val.mg_state}`)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户状态成功'
        })
      }
    },
    async deleteUserHandler (id) {
      const { meta } = await this.$http.delete(`users/${id}`)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })
        this.getUsersList()
      }
    },
    async showEditUserDialogHandler (id) {
      const { data } = await this.$get('users/' + id)

      this.editUserInfo.id = data.id
      this.editUserInfo.username = data.username
      this.editUserInfo.mobile = data.mobile
      this.editUserInfo.email = data.email

      this.editUserDialog = true
    },
    async editUserHandler () {
      const { meta } = await this.$http.put('users/' + this.editUserInfo.id, this.editUserInfo)

      if (meta.status === 200) {
        this.message({
          type: 'success',
          message: '编辑用户信息成功'
        })

        this.editUserDialog = false
        this.getUsersList()
      }
    },
    async showRightsHandler (val) {
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id

      const { data } = await this.$get('roles')
      this.rightsList = data
      this.rightsDialog = true
    },
    async editRightHandler () {
      const { meta } = await this.$http.put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rights })

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '设置用户角色成功'
        })
        this.getUsersList()
        this.rightsDialog = false
      }
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  },
  filters: {
    format (val) {
      const t = new Date(val * 100)

      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()

      return `${year} 年 ${month} 月 ${date} 日`
    }
  }
}
